<template>
  <div class="user-wrapper">
    <div class="content-box">
      <!-- <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
        <span class="action">
          做学校选择
          <a-icon type="question-circle-o"></a-icon>
        </span>
      </a>-->
      <!-- <span v-if="schools.length>1">
        <a-dropdown>
          <span class="ant-dropdown-link">
            {{this.$store.state.user.school_name}}
            <a-icon type="down" />
          </span>
          <a-menu slot="overlay">
            <a-menu-item v-for="(item,index) in schools" :key="index" @click="changeSchool(item)">
              <a>{{item.name}}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>-->
      <span v-if="schools.length > 1" class="school_change">
        <span @click="show = !show">
          {{ this.$store.state.user.school_name }}
          <span style="margin-left: 10px">
            <a-icon type="swap" class="icon_change" />
          </span>
        </span>

        <a-card
          title="切换学校"
          style="
            width: 300px;
            position: absolute;
            right: 0;
            top: 47px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
          "
          :headStyle="{ padding: '0 12px', fontSize: '14px' }"
          :bodyStyle="{ padding: '10px 12px' }"
          v-if="show"
        >
          <!-- <p v-for="(item,index) in schools" :key="index">{{item.name}}</p> -->
          <a-radio-group v-model="choiceSchool">
            <a-radio
              style="display: block; margin-bottom: 10px"
              v-for="(item, index) in schools"
              :key="index"
              :value="item.id"
              >{{ item.name }}</a-radio
            >
          </a-radio-group>
          <br />

          <div style="text-align: right">
            <a-button type="primary" size="small" style="margin-right: 10px" @click="changeSchool()">确定</a-button>
            <a-button size="small" @click="show = false">取消</a-button>
          </div>
        </a-card>
      </span>
      <span v-else style="padding: 0 24px; border-right: 1px solid #ccc">{{ this.$store.state.user.school_name }}</span>

      <span class="excelList" @click="$router.push({ name: 'downloadcenter' })">
        <a-icon :component="excelIcon" style="padding-right: 4px"></a-icon>导入导出
      </span>
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" size="small" :src="avatar" />
          <span>{{ name }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="0" @click="goCenter()">
            <span class="importname">
              <a-icon type="user" />
              <span>个人中心</span>
            </span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="1">
            <span class="importname" @click="goAdmin">
              <a-icon type="import" />
              <span>进入后台管理</span>
            </span>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="2" @click="handleLogout">
            <span class="importname">
              <a-icon type="logout" />
              <span>退出登录</span>
            </span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import NoticeIcon from '@/components/NoticeIcon'
import { mapActions, mapGetters } from 'vuex'
import store from '@/store'
import { getInfo } from '@/api/login'
import { excelIcon } from '@/core/icons'
import moment from 'moment'
export default {
  name: 'UserMenu',
  components: {
    NoticeIcon,
  },
  computed: {
    // ...mapGetters([ 'avatar'])
  },
  // inject:['reload'],
  data() {
    return {
      schools: [],
      excelIcon,
      name: '',
      avatar: '',
      show: false,
      choiceSchool: null, //选择的学校
      defaultSchool: null, // 默认学校
    }
  },
  methods: {
    ...mapActions(['Logout']),
    moment,
    goCenter() {
      this.$router.push({ name: 'center' })
      // console.log(this.$router)
    },
    handleLogout() {
      let that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return that
            .Logout({})
            .then(() => {
              store.dispatch('Logout')
            })
            .catch((err) => {
              that.$message.error({
                title: '错误',
                description: err.message,
              })
            })
        },
        onCancel() {},
      })
    },
    // 时间字符串转时间戳
    timeStamp: function (str) {
      if (str != 'now') {
        str = str.substring(0, 19)
        str = str.replace(/-/g, '/')
        return new Date(str).getTime() / 1000
      } else {
        return new Date().getTime()
      }
    },
    changeSchool() {
      if (this.choiceSchool !== this.defaultSchool) {
        let params
        let nowTime=null
        this.schools.forEach((val) => {
          val.isExpire = false
          if (val.is_limit == 1) {
            nowTime = this.timeStamp(moment().format('YYYY-MM-DD'))
            val.expirTime=this.timeStamp(val.limit_time)
            if (nowTime <= val.expirTime) {
              //未到期
              val.isExpire = false
            } else {
              //到期
              val.isExpire = true 
            }
          }
          if (val.id === this.choiceSchool) {
            params = val
          }
        })
        if (params.isExpire) {
          this.$message.warning(params.name + '已到期，请联系管理员续费！')
          this.show = false
          this.defaultSchool = this.$store.state.user.school
          this.choiceSchool = this.$store.state.user.school
          return
        } 
        this.$router.push({ name: 'loading', query: { id: params.id, name: params.name, type: 2 } })
        setTimeout(() => {
          location.reload()
        }, 100);
        
      }
      this.show = false
    },
    goAdmin() {
      this.$router.push({
        name: 'loading',
        query: { id: this.$store.state.user.school, name: this.$store.state.user.school_name, type: 1 },
      })
    },
  },
  created() {
    this.defaultSchool = this.$store.state.user.school
    this.choiceSchool = this.$store.state.user.school
    getInfo({ school_id: this.$store.state.user.school }).then((res) => {
      this.schools = res.schools
      this.name = res.name
      if (res.avatar) {
        this.avatar = res.avatar.url
      }
    })
  }, 
}
</script>
<style lang="less" scoped>
.school_change {
  position: relative;
  border-right: 1px solid #ccc;
  padding-right: 24px;
  cursor: pointer;
  .icon_change {
    font-size: 12px;
    color: #ccc;
  }
}
.excelList {
  padding: 0 24px;
  cursor: pointer;
}
.excelList:hover {
  color: #1890ff;
}
.importname:hover {
  color: #1890ff;
}
.school_change:hover {
  .icon_change {
    color: #000;
  }
}
</style>
